<template>
	<div class="page">
		<Head navTitle="账单记录" isIndex />
		<div class="page-container ">
			<el-row :gutter="16">
				<el-col :xs="24" :lg="13">
					<div class="bs-panel ht-panel ht-bill-panel ">
						<div class="bill-preview">
							<el-tabs class="bs-tab-flex" v-model="activeName">
								<el-tab-pane label="本周" name="bweek"></el-tab-pane>
								<el-tab-pane label="上周" name="sweek"></el-tab-pane>
								<el-tab-pane label="本月" name="bmonth"></el-tab-pane>
								<el-tab-pane label="上月" name="smonth"></el-tab-pane>
							</el-tabs>
							<el-row class="bill-data">
								<div class="bill-data-hd">总计</div>
								<el-col :span="12">
									<div class="val text-yellow">200,000.00</div>
									<div class="text">有效交易总额youxiaojiaoyizonge</div>
								</el-col>
								<el-col :span="12">
									<div class="val text-green">8,246.00</div>
									<div class="text">总收益zongshouyi</div>
								</el-col>
							</el-row>
						</div>
						<div class="has-table-head">
							<el-table stripe style="width: 100%" >
								<el-table-column align="center" prop="date" label="日期" >
								</el-table-column>
								<el-table-column align="center" prop="jprice" label="有效交易总额youxiaojiaoyizonge" >
								</el-table-column>
								<el-table-column align="center" prop="income" label="总收益zongshouyi">
								</el-table-column>
							</el-table>
						</div>
						<div class="ball-table bs-action-table">
							<el-table stripe v-infinite-scroll="load" infinite-scroll-disabled="disabled" :data="tableData" style="width: 100%" @row-click="openDetails">
								<el-table-column align="center" prop="date"  >
								</el-table-column>
								<el-table-column align="center" prop="jprice"  >
								</el-table-column>
								<el-table-column align="center" prop="income" >
								</el-table-column>
							</el-table>
							<div class="load-more" v-if="loading">加载中...</div>
							<div v-if="noMore">没有更多了</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :lg="11" v-if="windowWidth>1000">
					<div class="bs-panel ht-panel">
						<div class="bs-panel-body">
							<div class="game-vs">
								<div class="vs-title">澳大利亚职业足球联赛</div>
								<div class="vs-flex flex-center flex-hc">
									<div class="vs-title">神户胜利船shenghushenglichuan</div>
									<div class="vs-card_bd">
										<div class="vs-value">反波胆 <span class="score">0-1</span></div>
										<div class="vs-time">2021 04-21 04:00</div>
									</div>
									<div class="vs-title">德岛漩涡dedaoxuanwo</div>
								</div>
							</div>
							<div class="bill-list">
								<div class="bill-list-cell">
									<div class="text">注单编号</div>
									<div class="value">#2103470297492179247</div>
								</div>
								<div class="bill-list-cell">
									<div class="text">下单时间</div>
									<div class="value">2021-09-06 19:00:00</div>
								</div>
								<div class="bill-list-cell">
									<div class="text">市场</div>
									<div class="value">guangzhou citychongqingliangjiang athletlc</div>
									<div class="value">09-06 19:00 中国超级联赛</div>
								</div>
								<div class="bill-list-cell">
									<div class="text">波胆</div>
									<div class="value">0-0 <span class="text-green">@4.06%</span></div>
								</div>
								<div class="bill-list-cell">
									<div class="text">交易金额</div>
									<div class="value"><span class="text-green">5,000.00</span></div>
								</div>
								<div class="bill-list-cell">
									<div class="text">比赛结果</div>
									<div class="value">0-3</div>
								</div>
								<div class="bill-list-cell">
									<div class="text">获利</div>
									<div class="value"><span class="text-red">未结算</span></div>
								</div>
							</div>
							<div class="bs-pagination flex-center flex-hc">
								<el-pagination
								@size-change="handleSizeChange"
								:current-page="currentPage"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="100"
								layout="prev, pager, next, jumper,sizes"
								:total="400">
								</el-pagination>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 手机foter -->
		<Foot :active="3" />
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from "@/components/Foot.vue";
	export default {
		name: 'Home',
		components: {
			Head,Foot
		},
		data() {
			return {
				activeName:'bweek',
				tableData: [{
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, {
					date: '2021-09-06',
					jprice: '210,000.00',
					income: '289,832,201.00'
				}, ],
				count: 10,
				loading: false,
				currentPage:1,
				// 宽度
				windowWidth: document.documentElement.clientWidth
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.tableData.push({
							date: '2021-09-06',
							jprice: '210,000.00',
							income: '289,832,201.00'
						});
					}
					this.loading = false
				}, 2000)
			},
			handleSizeChange(){
				
			},
			// table点击
			openDetails(row){
				console.log(row.date)
				let that = this;
				console.log("实时屏幕宽度：", that.windowWidth);
				if (that.windowWidth<1000) {
					this.$router.push('/billRecordDetail');
				} else{
					alert(row.date)
				}
			}
		}
	}
</script>
